<template>
	<script :id="editor_id" :name="editor_id" type="text/plain" />
</template>

<script>
export default {
	created() {
		this.editor = null;
		this.initTimer = null;
		this.contentTimer = null;
	},
	watch: {
		//有异步数据进来时，捕获并初始化富文本内容
		defaultValue(val) {
			clearTimeout(this.initTimer);
			this.initTimer = setTimeout(() => {
				this.initEditorContent(val);
			}, 800);
		},
	},
	mounted() {
		this.editor = window.UE.getEditor(this.editor_id, {
			serverUrl: `/api/rc-service/ueditor/exec?module=${this.imgUploadFolder}`,
			initialFrameWidth: this.width, //设置编辑器宽度
			initialFrameHeight: this.height, //设置编辑器高度
			...this.config,
		});
		if (this.editor) {
			this.editor.ready(() => {
				if (this.defaultValue) {
					this.initEditorContent(this.defaultValue);
				}

				this.$emit('ready', this.editor);
				this.editor.addListener('contentChange', () => {
					clearTimeout(this.contentTimer);
					this.contentTimer = setTimeout(() => {
						var htmlStr = this.editor.getContent();
						this.$emit('change', htmlStr, this.editor);
					}, 800);
				});
			});
		}
	},
	methods: {
		initEditorContent(val = '') {
			if (this.editor && val) {
				this.editor.setContent(val.replace('type="video/x-ms-asf-plugin"', ''));

				this.editor.focus(this.editor.getContent().length);
			}
		},
	},

	beforeDestroy() {
		if (this.editor) {
			this.editor.destroy();
			this.editor = null;
		}

		this.initTimer = null;
		this.contentTimer = null;
	},

	props: {
		defaultValue: {
			type: String,
			default: '',
		},
		imgUploadFolder: {
			type: String,
			default: 'tmp/',
		},

		editor_id: {
			type: String,
			default: `ueditor_${Math.random()
				.toString()
				.replace('', '')}`,
		},
		width: {
			type: String,
			default: '100%',
		},
		height: {
			type: Number,
			default: 400,
		},
		config: {
			type: Object,
			default: () => {
				return {
					scaleEnabled: true,
					toolbars: [
						[
							'source',
							'fullscreen',
							'undo',
							'redo',
							'|',
							'bold',
							'italic',
							'underline',
							'fontborder',
							'strikethrough',
							'superscript',
							'subscript',
							'removeformat',
							'formatmatch',
							'autotypeset',
							'blockquote',
							'pasteplain',
							'|',
							'forecolor',
							'backcolor',
							'insertorderedlist',
							'insertunorderedlist',
							'|',
							'rowspacingtop',
							'rowspacingbottom',
							'lineheight',
							'|',
							'customstyle',
							'paragraph',
							'fontfamily',
							'fontsize',
							'|',
							'directionalityltr',
							'directionalityrtl',
							'indent',
							'|',
							'justifyleft',
							'justifycenter',
							'justifyright',
							'justifyjustify',
							'|',
							'touppercase',
							'tolowercase',
							'|',
							'link',
							'unlink',
							'anchor',
							'|',
							'imagenone',
							'imageleft',
							'imageright',
							'imagecenter',
							'|',
							'emotion',
							'simpleupload',
							'insertimage',
							'insertvideo',
							'music',
							'map',
							'insertcode',
							'template',
							'|',
							'horizontal',
							'spechars',
							'wordimage',
							'inserttable',
							'deletetable',
							'insertparagraphbeforetable',
							'insertrow',
							'deleterow',
							'insertcol',
							'deletecol',
							'mergecells',
							'mergeright',
							'mergedown',
							'splittocells',
							'splittorows',
							'splittocols',
							'charts',
							'kityformula',
						],
					],
				};
			},
		},
	},
};
</script>
